<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>定位猴子右耳朵</title>
  <style>
    /* 容器：设置为相对定位，作为内部绝对定位元素的参考 */
    .monkey-container {
      position: relative;
      display: inline-block; /* 让容器宽度跟随图片 */
    }

    /* 猴子图片：可根据需要调整尺寸 */
    .F:\Jdk-5\26cs\web_code\2.css\img\sun.jpg {
      width: 300px; /* 示例宽度，可自行修改 */
      height: auto;
    }

    /* 右耳朵标记：绝对定位到右耳朵位置 */
    .right-ear-marker {
      position: absolute;
      /* 调整top/right/width/height，使边框覆盖右耳朵（需根据图片实际位置微调） */
      top: 20px;    /* 距离容器顶部的距离 */
      right: 20px;  /* 距离容器右侧的距离 */
      width: 60px;  /* 标记框宽度 */
      height: 80px; /* 标记框高度 */
      border: 2px solid red; /* 红色边框，方便识别 */
      border-radius: 50% 50% 30% 30%; /* 模拟耳朵轮廓（可选） */
      background-color: rgba(255, 0, 0, 0.1); /* 半透明背景（可选） */
    }
  </style>
</head>
<body>
  <div class="monkey-container">
    <img src="monkey.png" alt="卡通猴子" class="monkey-img">
    <!-- 右耳朵标记元素 -->
    <div class="right-ear-marker"></div>
  </div>
</body>
</html>